<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
    body {
        width: 960px;
        margin: 0 auto;
        font-family: 微软雅黑;
        font-size: 18px;
        line-height: 1.8em;
    }

    div {
        width: 300px;
        float: left;
    }

    .relative {
        position: relative;
        top: 150px;
    }

    .absolute {
        position: absolute;
        top: 150px;
    }

    .bg {
        background-color: rgba(100, 100, 100, .5);
    }
    </style>
</head>

<body>
    <div>
        <h2>正常信息流</h2>
        <p>我无限的热爱着新的一日，今天的太阳，今天的马，今天的花椒树。</p>
        <p>使我健康、富足、拥有一生。</p>
        <p class="bg">从黎明到黄昏，阳光充足，胜过一切过去的诗。</p>
        <p>幸福找到我，幸福说：“瞧，这个诗人。”</p>
        <p>他比我本人还要幸福。</p>
    </div>
    <div>
        <h2>相对定位</h2>
        <p>我无限的热爱着新的一日，今天的太阳，今天的马，今天的花椒树。</p>
        <p>使我健康、富足、拥有一生。</p>
        <p class="bg relative">从黎明到黄昏，阳光充足，胜过一切过去的诗。</p>
        <p>幸福找到我，幸福说：“瞧，这个诗人。”</p>
        <p>他比我本人还要幸福。</p>
        <code>.relative { position: relative; top:150px;}</code>
    </div>
    <div>
        <h2>绝对定位</h2>
        <p>我无限的热爱着新的一日，今天的太阳，今天的马，今天的花椒树。</p>
        <p>使我健康、富足、拥有一生。</p>
        <p class="bg absolute">从黎明到黄昏，阳光充足，胜过一切过去的诗。</p>
        <p>幸福找到我，幸福说：“瞧，这个诗人。”</p>
        <p>他比我本人还要幸福。</p>
        <code>.absolute {
        position: absolute;
        top:150px;}
      </code>
    </div>
</body>

</html>
